<template>
  <div class="page-hero_detail">
    <div class="topbar bg-black text-white py-2 px-3 d-flex ai-center">
      <img src="../assets/logo.png" height="30">
      <div class="pl-2">王者荣耀</div>
      <div class="flex-1 pl-2">攻略站</div>
      <router-link to="/heroList" tag="span">&gt;</router-link>
    </div>
    <div>
      <img class="w-100" :src="baseUrl + id +'.jpg'">
    </div>
  </div>
</template>

<script>
export default {
  props: {
    id: { required: true }
  },
  data () {
    return {
      baseUrl: 'https://game.gtimg.cn/images/yxzj/m/m201706/images/heropicdetail/'
    }
  }
}
</script>

<style lang="less" scoped>
.topbar {
  position: sticky;
  top: 0;
  z-index: 999;
}
</style>
